<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>藏酒主题</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<include file="public/comm" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav fs_xl">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left fs_xxi"></a>
		    <h1 class="mui-title fs_xl">{$themename['title']}</h1>
		</header>
		<include file="public/bottom_nav" />
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper fs_xl">
			<div class="mui-scroll fs_xl pr_m">
				<ul class="mui-table-view mui-table-view-chevron fs_xl" id="goodslist">
					
					<foreach name="goodslist" item="vo" key="k">
					<li class="mui-table-view-cell fs_xl cls">
						<a class="fs_xl" href="{:U('Cellar/goodsInfo',array('id'=>$vo.goods_id))}">
							<div class="pr_info fs_xl fr">
								<p class="fs_m">{$vo.goods_name}</p>
								<p class="fs_xs"><i class="mui-icon iconfont icon-huangye_dianpumingcheng fs_xl"></i><em>{$vo.suppliers_name}</em></p>
								<p class="fs_m">
									<foreach name="vo.cellartheme" item='v' key='kk'><span class="span1 fs_xxs">{$v.title}</span></foreach>
									<foreach name="vo.aroma" item='v' key='kk'><span class="span2 fs_xxs">{$v.title}</span></foreach>	
								</p>
								<p class="fs_m"><span class="span3 fs_xl">¥{$vo.shop_price}/坛</span><span class="span4 fs_xxs">{$vo.sales_sum}坛已售</span></p>
							</div>
							<div class="pr_img fs_xl fl">
								<img src="{$vo.original_img}" />
							</div>
						</a>
					</li>
					</foreach>
				</ul>
			</div>
		</div>
		<script>
		mui.init({
			pullRefresh: {
				container: '#pullrefresh',
//				down: {
//					callback: pulldownRefresh
//				},
				up: {
					contentrefresh: '正在加载...',
					callback: pullupRefresh
				}
			}
		});
		/**
		 * 下拉刷新具体业务实现
		 */
//		function pulldownRefresh() {
//			setTimeout(function() {
//				var table = document.body.querySelector('.mui-table-view');
//				var cells = document.body.querySelectorAll('.mui-table-view-cell');
//				for (var i = cells.length, len = i + 3; i < len; i++) {
//					li.className = 'mui-table-view-cell';
//					li.innerHTML = '<a class="fs_xl" href="javascript:;">'+'<div class="pr_info fs_xl fr">'+
//					'<p class="fs_m">新增加的酒'+'</p>'+
//					'<p class="fs_xs">'+'<i class="mui-icon mui-icon-eye">'+'</i>'+'<em>'+'</em>成都市大邑县原产'+'</p>'+
//					'<p class="fs_m">'+'<span class="span1 fs_xxs">室内窖藏'+'</span>'+'<span class="span2 fs_xxs">馥郁香'+'</span>'+'</p>'+
//					'<p class="fs_m">'+'<span class="span3 fs_xl">¥56/kg'+'</span>'+'<span class="span4 fs_xxs">6583kg已售'+'</span>'+'</p>'+
//					'</div>'+
//					'<div class="pr_img fs_xl fl">'+'<img src="../images/banner03.png" />'+'</div>'+
//					'</a>';
//					//下拉刷新，新纪录插到最前面；
//					table.insertBefore(li, table.firstChild);
//				}
//				mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
//			}, 1500);
//		}
		var count = 0;
		var pagesum = {$pagesum};
		var limit = {$limit};
		/**
		 * 上拉加载具体业务实现
		 */
		function pullupRefresh() {
			setTimeout(function() {
				mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > pagesum)); //参数为true代表没有更多数据了。
				getdatas('pullRefresh',limit*count);
			}, 1500);
		}
		
		function getdatas(mod,start){
			var id = {$id};
			$.post("{:U('Cellar/theme')}",{'start':start,'id':id},function(content){

				if(content.status == 1){
					if(mod != 'pullRefresh'){
						$("#goodslist").html(" ");//重置数据
					}
					var table = document.body.querySelector('.mui-table-view');
//						pagenum = content.data.pagenum;
                    $.each(content.data, function(i,goods) {
                    	var li = document.createElement('li');
						li.className = 'mui-table-view-cell';
						li.innerHTML = '<a class="fs_xl" href="/Mobile/Cellar/goodsInfo/id/'+goods.goods_id+'.html">'+'<div class="pr_info fs_xl fr">'+
						'<p class="fs_m">'+goods.goods_name+'</p>'+
						'<p class="fs_xs">'+'<i class="mui-icon iconfont icon-huangye_dianpumingcheng fs_xl">'+'</i>'+'<em>'+'</em>'+goods.suppliers_name+'</p>'+
						'<p class="fs_m">'+'<span class="span1 fs_xxs">'+goods.cellartheme[0].title+'</span>'+'<span class="span2 fs_xxs">'+goods.aroma[0].title+'</span>'+'</p>'+
						'<p class="fs_m">'+'<span class="span3 fs_xl">¥'+goods.shop_price+'/坛'+'</span>'+'<span class="span4 fs_xxs">'+goods.sales_sum+'坛已售</span>'+'</p>'+
						'</div>'+
						'<div class="pr_img fs_xl fl">'+'<img src="'+goods.original_img+'" />'+'</div>'+
						'</a>';
						table.appendChild(li);
                    });
				}
				else{
					if(mod != 'pullRefresh'){
					   $("#goodslist").html("<center>暂无相关商品</center>");
					}
				}
			},'json');
			
		}
//		if (mui.os.plus) {
//			mui.plusReady(function() {
//				setTimeout(function() {
//					mui('#pullrefresh').pullRefresh().pullupLoading();
//				}, 10);
//
//			});
//		} else {
//			mui.ready(function() {
//				mui('#pullrefresh').pullRefresh().pullupLoading();
//			});
//		}
				$(".pr_m li").on('tap', function() {
  					var sur=$(this).find("a").attr("href");
  					mui.openWindow({
    					url: sur
  					});
				});
		</script>
	</body>

</html>